<template>
    <el-dialog
        style="padding: 32px; padding-bottom: 50px; border-radius: 12px"
        v-model="appStore.dialogSelectToken"
        width="526"
        align-center
    >
        <template #header>
            <div class="text-18px font-bold mb-24px">Select a token</div>
        </template>
        <div class="flex flex-col gap-16px">
            <el-input
                v-model="search"
                style="
                    width: 463px;
                    height: 56px;
                    border-radius: 8px;
                    font-size: 17px;
                    --el-input-height: 56px;
                    --el-input-border-color: #e8effb;
                "
                size="large"
                placeholder="Search name or paste address"
            >
                <template #prefix>
                    <div class="i-carbon:search w-24px h-24px"></div>
                </template>
            </el-input>
            <div class="flex items-center gap-8px">
                <div v-for="(v, i) in hotList" :key="i">
                    <el-button
                        style="
                            width: 150px;
                            height: 42px;
                            border: 1px solid #e8effb;
                            border-radius: 8px;
                            background-color: #fafcfe;
                        "
                    >
                        <template #default>
                            <div class="flex items-center gap-8px">
                                <el-image class="w-24px" :src="v.icon" fit="fill" />
                                <div class="text-#484C56 text-14px font-400">{{ v.name }}</div>
                            </div>
                        </template>
                    </el-button>
                </div>
            </div>
            <div class="mt-16px text-#141A21 text-18px font-bold">Token Name</div>
            <div class="flex flex-col items-center">
                <div
                    v-for="(v, i) in tokenList"
                    :key="i"
                    class="w-462px h-56px flex items-center justify-between cursor-pointer hover-bg-#EFF4FC"
                >
                    <div class="flex items-center gap-16px">
                        <el-image class="w-24px" :src="v.icon" fit="fill" />
                        <div class="text-14px font-bold">{{ v.name }}</div>
                    </div>
                    <div class="text-12px font-400">{{ v.rightText }}</div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

const search = ref('')
const hotList = ref([
    {
        name: 'USDT',
        icon: '/images/tether.svg'
    },
    {
        name: 'TRON',
        icon: '/images/tron.svg'
    },
    {
        name: 'HNY',
        icon: '/images/hiveWallet.svg'
    }
])
const tokenList = [
    {
        name: '1EARTH',
        icon: '/images/_1inch.svg',
        rightText: 'EarthFund'
    },
    {
        name: 'Ape Swap',
        icon: '/images/apeSwap.svg',
        rightText: 'Aswap'
    },
    {
        name: 'Avalanche avax',
        icon: '/images/avax.svg',
        rightText: 'Avax'
    },
    {
        name: '18C',
        icon: '/images/bitcoin.svg',
        rightText: 'Block 18'
    },
    {
        name: '1EARTH',
        icon: '/images/ada.svg',
        rightText: 'EarthFund'
    },
    {
        name: 'CoineBase',
        icon: '/images/coinbase.svg',
        rightText: 'Coinbase'
    },
    {
        name: 'Doge coin',
        icon: '/images/dogeCoin.svg',
        rightText: 'Doge'
    }
]
</script>

<style scoped>
:deep(.el-icon) {
    width: 24px !important;
}
</style>
